import React, { Component } from 'react'
import axios from 'axios'
import { Tabs, List, Image } from 'antd-mobile'
import '../../assets/css/home/k-tabs.less'

export default class KTab extends Component {
  state = {
    tabs: []
  }

  render() {
    return (
      <div className="k-tabs">
        <Tabs activeLineMode="full" defaultActiveKey="0" onChange={(key) => {}}>
          {this.state.tabs.map((item, i) => {
            return (
              <Tabs.Tab title={item.title} key={i}>
                <List>
                  {item.contents.map((content, index) => {
                    return index === 0 ? (
                      <List.Item
                        key={index}
                        prefix={
                          <Image
                            src={content.thumb}
                            fit="cover"
                            width={80}
                            height={50}
                          />
                        }
                        extra={
                          <div>
                            <i className="iconfont icon-kaiyanjing"></i>
                            <span>{Math.floor(Math.random() * 100) + 10 }</span>
                          </div>
                        }
                        title={content.title}
                        description={
                          <div>
                            <i className="iconfont icon-shijian"></i>
                            <span>两小时前</span>
                          </div>
                        }
                      ></List.Item>
                    ) : (
                      <List.Item arrowIcon key={index}>
                        <div className="text"> {content.title}</div>
                      </List.Item>
                    )
                  })}
                </List>
              </Tabs.Tab>
            )
          })}
        </Tabs>
      </div>
    )
  }
  async componentDidMount() {
    const result = await axios.get('/data/tablist.json')
    const { tabs } = result.data
    this.setState({
      tabs
    })
    // console.log(tabs)
  }
}
